import React, { useEffect, useState, Key } from 'react'
import { Button, Form, Input, Card, Space, Table, message, Tooltip } from 'antd'
// 这是antd中提供的一些ts类型
import type { ColumnsType } from 'antd/es/table'
import { SearchOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'
import { Navigate, useNavigate } from 'react-router-dom'

// 引入ts类型
import {
  IhospitalSetList,
  IhospitalSet,
} from '@api/hospital/hospitalSet/model/hospitalSetTypes'
// 引入发送请求的函数
import {
  reqHospitalSets,
  reqDelHospitalSet,
  reqBatchDelHospitalSet,
} from '@api/hospital/hospitalSet/index'

import './index.css'

// 定义一个变量,用来记录是否点击了查询
let flag = false //假设flag为false,就是没有点击过查询或点击了清空,如果flag为true就是点击了查询了

export default function HospitalSet() {
  // 医院设置表格数据
  // 注意: 定义状态时,由于没有声明状态的数据类型,所以自动推论为never[],我们需要手动传入泛型,将状态的类型声明为我们需要的类型
  const [hospitalSets, setHospitalSets] = useState<IhospitalSetList>([])

  // 分页相关的状态
  const [total, setTotal] = useState(0)
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(5)

  // 存储选中的数据id
  // 注意: Key是react包中提供的ts类型,表示唯一标识符
  const [selectKeys, setSelectKeys] = useState<Key[]>([])

  // 展示正在加载效果的状态
  const [loading, setLoading] = useState(false)

  // 操作form表单的步骤:
  // 1. 利用Form.useForm()这个hook创建form实例对象
  const [form] = Form.useForm()
  // 2. 使用form实例对象和Form组件进行绑定
  // 在Form组件上写form属性值就是form实例
  // 3. 利用form实例操作表单
  // console.log(form.getFieldsValue())

  // 编程式导航的代码
  const navigate = useNavigate()

  useEffect(() => {
    // 获取表格数据的时机1: 组件挂载
    getHospitalSets(page, pageSize)
  }, [])

  // 获取表格分页数据的函数
  async function getHospitalSets(page: number, pageSize: number) {
    // 发请求之前展示loading
    setLoading(true)
    // 点击了查询按钮之后,请求数据要有hosname和hoscode. 如果没有点击查询,或点击了清空,则发送请求不添加hosname和hoscode
    let result
    if (flag) {
      // 获取form表单中的数据
      const { hosname, hoscode } = form.getFieldsValue()
      result = await reqHospitalSets(page, pageSize, hosname, hoscode)
    } else {
      result = await reqHospitalSets(page, pageSize)
    }
    setHospitalSets(result.records)
    setTotal(result.total)
    // 请求完成之后
    setLoading(false)
  }

  // 查询按钮的事件处理函数
  const onFinish = (values: any) => {
    // console.log('Success:', values)
    flag = true
    // 让页码正确高亮
    setPage(1)
    // 注意: 只要是点击了查询,一定要从第一页开始
    getHospitalSets(1, pageSize)
  }

  // 注意: columns决定了表格中的表头和对应的列展示什么数据,所以需要把数据对象的ts类型,通过泛型传进去.否则dataSource会检查错误
  const columns: ColumnsType<IhospitalSet> = [
    {
      title: '序号', // 决定了当前这一列的表头显示什么
      // dataIndex: 'name',
      // key: 'name',
      render: (text, record, index) => {
        // text 是dataSource的数据,受到dataIndex的影响
        // record 也是dataSource的数据,永远都是dataSource中的对象
        // index 是dataSource中每一个数据的下标
        return index + 1
      },
      align: 'center', //让这一列的内容水平居中对齐
      width: 80, //让这一列宽度为80px
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
    },
    {
      title: '医院编号',
      dataIndex: 'hoscode',
    },
    {
      title: 'api基础路径',
      dataIndex: 'apiUrl',
    },
    {
      title: '签名',
      dataIndex: 'signKey',
    },
    {
      title: '联系人名称',
      dataIndex: 'contactsName',
    },
    {
      title: '联系人手机号',
      dataIndex: 'contactsPhone',
    },
    {
      title: '操作',
      dataIndex: 'id',
      render: (id, record) => {
        return (
          // Space给子组件添加间隔
          <Space size="small">
            <Tooltip title="修改医院">
              <Button
                type="primary"
                icon={<EditOutlined />}
                onClick={() => {
                  navigate(`/syt/hospital/hospitalSet/edit/${id}`)
                }}
              ></Button>
            </Tooltip>
            <Tooltip title="删除医院">
              <Button
                type="primary"
                danger
                icon={<DeleteOutlined />}
                onClick={async () => {
                  await reqDelHospitalSet(id)
                  message.success('删除成功')
                  // 重新获取表格数据
                  getHospitalSets(page, pageSize)
                }}
              ></Button>
            </Tooltip>
          </Space>
        )
      },
      fixed: 'right', //这一列固定在右侧
      width: 120, //控制着一列的宽度是80px
    },
  ]

  // const onFinishFailed = (errorInfo: any) => {
  //   console.log('Failed:', errorInfo)
  // }
  return (
    // Card组件自带白色背景颜色,有内边距
    <Card>
      <Form
        form={form} //form实例和form组件进行绑定
        layout="inline" //控制表单中表单项布局的属性,inline表示在一行中展示
        name="basic"
        onFinish={onFinish} // 当表单中的提交按钮点击之后并且表单校验通过,则触发
      >
        <Form.Item
          name="hosname" //当前表单项的名称
        >
          <Input placeholder="医院名称" />
        </Form.Item>

        <Form.Item name="hoscode">
          <Input placeholder="医院编码" />
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
            查询
          </Button>
        </Form.Item>

        <Form.Item>
          <Button
            onClick={() => {
              flag = false
              // 清空表单中的文本框
              form.setFieldsValue({ hosname: undefined, hoscode: undefined })
              getHospitalSets(page, pageSize)
            }}
          >
            清空
          </Button>
        </Form.Item>
      </Form>

      <div style={{ marginTop: 20 }}>
        <Button
          type="primary"
          className="add-btn"
          onClick={() => {
            // 跳转到添加页面
            navigate('/syt/hospital/hospitalSet/add')
          }}
        >
          添加
        </Button>
        <Button
          type="primary"
          danger
          disabled={!selectKeys.length}
          onClick={async () => {
            await reqBatchDelHospitalSet(selectKeys)
            message.success('批量删除成功')
            getHospitalSets(page, pageSize)
          }}
        >
          批量删除
        </Button>
        {/* 
        columns:决定了表格中有多少列,每一列的标题是什么
        dataSource: 决定了表格中展示什么数据
        scroll: 允许表格滚动. 当表格的宽度超过1500px则出现滚动条
        bordered: 给表格添加边框
         */}
        <Table
          loading={loading}
          style={{ marginTop: 20 }}
          columns={columns}
          dataSource={hospitalSets}
          scroll={{ x: 1500 }}
          bordered
          // 这是在表格列表渲染过程中,会自动帮我们加key属性.值为id.意味着会自动从我们dataSource的数据对象中找到每一个对象的id属性的值作为key的值
          rowKey={'id'}
          pagination={{
            current: page, // 控制哪个页码高亮
            total, // 表示分页时数据总数
            pageSize, // 控制分页器一页有多少条数据
            showTotal() {
              return `总共: ${total}条`
            },
            // 只要点击了分页器就触发
            onChange(page, pageSize) {
              // page就是选择的最新的页码
              // pageSize就是选择的最新的一页多少条
              setPage(page)
              setPageSize(pageSize)
              // 获取表格数据的时机2: 点击了分页按钮
              //注意: setPage和setPageSize是异步的.所以需要把最新的page和pageSize传入到发请求的函数中
              getHospitalSets(page, pageSize)
            },

            showSizeChanger: true, // 展示选择一页多少条的属性
            pageSizeOptions: [2, 5, 10], // 选择一页多少条的选项
            showQuickJumper: true, // 展示快速跳转
          }}
          rowSelection={{
            // 只要触发了复选框,则会触发
            onChange(selectKeys) {
              // console.log('点击复选框了', selectKeys)
              setSelectKeys(selectKeys)
            },
          }} // rowSelection展示复选框
        />
      </div>
    </Card>
  )
}
